@mixin oh-my-bar {
    // doks header-bar
    border-top: 4px solid;
    border-image-source: linear-gradient(90deg, #0d6efd, #8ed6fb 50%, #d32e9d);
    border-image-slice: 1;
}

@mixin oh-my-opacity {
    transition: all 0.3s linear;
    opacity: 0;

    &:hover {
        opacity: 1;
    }
}

@import "./font.scss";

:root {
    --font-jk-base: 'LXGW WenKai GB Screen R', jinkaiFont;
    --font-jk-text: 'LXGW WenKai GB Screen R', jinkaiFont;
    --font-jk-mono: 'Code New Roman', romanFont, 'LXGW WenKai Mono';

    // ... #7f6df2;
    --color-jk-purple: #896a9e;
    --color-jk-purple-33: #896a9e33;
}


body {
    // 字体相关 - 全局字体、编辑器字体、代码块字体
    --font-interface-theme: var(--font-jk-base);
    --font-text-theme: var(--font-jk-text);
    --font-monospace-theme: var(--font-jk-mono);

    --divider-color: #f000;
    --table-border-color: #cccc;

    // 添加 doks bar 彩虹条
    &::before {
        content: '';
        position: absolute;
        z-index: 9999;
        width: 100%;
        @include oh-my-bar;
    }

    img {
        border-radius: 4px;
    }

    .table-wrapper {
        width: 100% !important;
        .table-editor {
            width: 100% !important;
            border-top: 2px solid var(--table-border-color);
            tbody tr:nth-child(odd) {
                background: #aac2;
            }
        }
    }

    .cm-inline-code {
        font-size: 14px !important;
        color: #d63384 !important;
        background-color: #fff0 !important;
    }

    // 标题层级标注
    .HyperMD-header {
        &.HyperMD-header-2::before {
            content: '♪²  ';
        }
        &.HyperMD-header-3::before {
            content: '♪³  ';
        }
        &.HyperMD-header-4::before {
            content: '♪⁴  ';
        }
        &.HyperMD-header-5::before {
            content: '♪⁵  ';
        }
        &.HyperMD-header-6::before {
            content: '♪⁶  ';
        }
    }

    .titlebar {
        .mod-right {
            @include oh-my-opacity;
        }
    }

    .app-container {
        .mod-left {
            @include oh-my-opacity;
        }

        .mod-left-split {
            @include oh-my-opacity;

            .workspace-tab-header-container {
                @include oh-my-opacity;
            }

            .workspace-tab-container {
                .nav-buttons-container {
                    @include oh-my-opacity;
                }
            }
        }

        .mod-root {
            .mod-top:not(.mod-stacked) .workspace-tab-header-container {
                // 顶部 Tab 栏样式
                @include oh-my-opacity;

                width: 666px;
                margin: 0 auto;
                padding: 0;
                margin-bottom: 10px;

                position: absolute;
                z-index: 99;
                left: 50%;
                transform: translateX(-50%);

                .workspace-tab-header-container-inner {
                    padding: 0px 15px 5px;
                }

                .sidebar-toggle-button {
                    z-index: 99;
                }

                border-width: 0;
                ::after {
                    display: none;
                }

                // 打开的页面选项栏
                .workspace-tab-header {
                    border-radius: 20px;
                    padding-top: 4px;
                    margin: 1px 1px;
                    border: 1px solid var(--color-jk-purple-33);

                    &.is-active {
                        border: 1px solid var(--color-jk-purple);
                    }

                    .workspace-tab-header-inner {
                        margin: 0 4px;
                        background: transparent;
                    }

                    &::before,
                    &::after {
                        display: none;
                    }

                    &:hover {
                        background: var(--color-jk-purple-33);
                    }
                }
            }

            .workspace-tab-container {
                border-radius: 16px;

                .view-header {
                    @include oh-my-opacity;

                    .view-header-nav-buttons {
                        position: absolute;
                        left: 10px;
                        top: 10px;
                        z-index: 99;
                    }
                    .view-header-title-container {
                        opacity: 0;
                    }
                    .view-actions {
                        position: absolute;
                        top: 10px;
                        right: 10px;
                    }
                }

                .view-content {
                    // 页面顶部属性设置栏
                    .metadata-container {
                        transition: all 0.2s linear;
                        margin-bottom: 28px;
                        &.is-collapsed {
                            height: 0;
                            padding: 0;
                        }

                        .metadata-properties-heading {
                            width: 100%;
                            cursor: pointer;
                            .metadata-properties-title {
                                opacity: 0;
                            }
                        }
                    }

                    table {
                        width: 100%;
                        tbody tr:nth-child(odd) {
                            background: #aac2;
                        }
                    }
                }
            }
        }

        .mod-right-split {
            @include oh-my-opacity;

            .workspace-tab-header-container {
                @include oh-my-opacity;
            }

            // 右侧边栏目录层级边距
            .workspace-tab-container {
                padding-top: 24px;
            }
        }

        .mod-right {
            @include oh-my-opacity;
        }

        .status-bar {
            // @include oh-my-opacity;
            // opacity: 1;
            
            .plugin-backlink,
            .plugin-properties {
                opacity: 0;

                &:hover {
                    @include oh-my-opacity;
                }
            }
            .plugin-editor-status,
            .plugin-word-count {
                opacity: 0.3;
                &:hover {
                    @include oh-my-opacity;
                }
            }
        }
    }
}

.theme-dark {
    --background-primary: #262626;
    --background-secondary: #262626;
    --background-secondary-alt: #262626;
}

.theme-light {
    // 主窗口背景色
    --background-primary: #f4f7fb;
    // 代码块背景色
    --background-primary-alt: #fff7;
    // 边栏背景色
    --background-secondary: #f4f7fb;
    // 窗口激活时的标题栏背景色
    --background-secondary-alt: #f4f7fb;
    // 光标悬浮背景色
    --background-modifier-hover: var(--color-jk-purple-33);
}
